<template>
  <div class="w-40 h-10 relative slider">
    <div class="absolute  left-0 right-0 top-4 bottom-4 z-10 border-gray-300 border-2"></div>
    <div class="absolute left-0 top-4 bottom-4 bg-blue-500 z-20" :style="{width:zhi+'%',}"></div>
    <div class="absolute top-4 w-5 h-5 rounded-full border-gray-300 hover:border-blue-500 z-30 cursor-pointer"
         :style=" {transform: 'translateX(-50%)',left:zhi+'%',}"></div>
  </div>
</template>

<script setup>
import {ref} from "vue"
const zhi = ref(20)
</script>

<style scoped>

</style>